<template>
  <div class="account">
    <div class="from-wrap">
      <a-form
        name="custom-validation"
        ref="ruleForm"
        :model="account_form"
        :rules="rules_form"
        @finish="handleFinish"
      >
        <!-- name="username"用于下面 rules_form中的validator匹配-->
        <a-form-item name="username">
          <label>用户名</label>
          <a-input
            v-model:value="account_form.username"
            type="text"
            autocomplete="off"
          />
        </a-form-item>

        <a-form-item name="password">
          <label>密码</label>
          <a-input
            v-model:value="account_form.password"
            type="password"
            autocomplete="off"
          />
        </a-form-item>

        <a-form-item name="passwords">
          <label>设置密码</label>
          <a-input
            v-model:value="account_form.passwords"
            type="password"
            autocomplete="off"
          />
        </a-form-item>

        <a-form-item name="code">
          <label>验证码</label>
          <a-row :gutter="15">
            <a-col :span="14" :order="1">
              <a-input
                v-model:value="account_form.code"
                type="text"
                autocomplete="off"
              ></a-input>
            </a-col>
            <a-col :span="10" :order="2">
              <a-button
                type="primary"
                html-type="submit"
                @click="getCode"
                :loading="button_loading"
                :disabled="button_disabled"
                block
                >{{ button_text }}</a-button
              >
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" block>提交</a-button>
        </a-form-item>
      </a-form>
      <div class="text-center fs-12">
        <router-link to="/" class="color-white">登录</router-link> |
        <router-link to="/register" class="color-white">注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
// 引入ant Design的全局提示框
import { message } from "ant-design-vue";
// 导入验证方法
import {
  checkPhone,
  checkPassword as contrastPassword,
  checkCode as contrastCode,
} from "@/utils/verification";
import { reactive, toRefs, ref } from "@vue/reactivity";
// import { onMounted } from "@vue/runtime-core";
export default {
  name: "Login",
  components: {},
  setup(props) {
    // const ruleForm = ref();
    // 验证手机号
    const checkUsername = async (rule, value) => {
      // console.log(rule);
      if (value === "") {
        return Promise.reject("请输入用户名");
      } else if (!checkPhone(value)) {
        return Promise.reject("请输入11位手机号");
      } else {
        return Promise.resolve();
      }
    };
    // 验证密码
    const checkPassword = async (rule, value) => {
      if (value === "") {
        return Promise.reject("请输入密码");
      } else if (!contrastPassword(value)) {
        return Promise.reject("请输入6-20位数字+英文");
      } else {
        return Promise.resolve();
      }
    };
    // 验证重复密码
    const checkPasswords = async (rule, value) => {
      const pas = formConfig.account_form.password;
      if (value === "") {
        return Promise.reject("请再次输入密码");
      } else if (!contrastPassword(value)) {
        return Promise.reject("请输入6-20位数字+英文");
      } else if (pas && value && pas !== value) {
        return Promise.reject("两次密码不一致");
      } else {
        return Promise.resolve();
      }
    };
    // 校验验证码
    const checkCode = async (rule, value) => {
      if (value === "") {
        return Promise.reject("请输入验证码");
      } else if (!contrastCode(value)) {
        return Promise.reject("验证码格式为6位字母+数字");
      } else {
        return Promise.resolve();
      }
    };
    const formConfig = reactive({
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
      account_form: {
        username: "",
        password: "",
        passwords: "",
        code: "",
      },
      rules_form: {
        username: [{ validator: checkUsername, trigger: "change" }],
        password: [{ validator: checkPassword, trigger: "change" }],
        passwords: [{ validator: checkPasswords, trigger: "change" }],
        code: [{ validator: checkCode, trigger: "change" }],
      },
    });
    const dataItem = reactive({
      // 获取验证码按钮
      button_text: "获取验证码",
      button_loading: false,
      button_disabled: false,
      // 倒计时时间
      sec: 60,
      // 定时器
      timer: null,
    });
    // 获取验证码点击事件
    const getCode = () => {
      //用户名为空时
      if (!formConfig.account_form.username) {
        message.error("用户名为空");
        return false;
      }
      // 优先判断定时器是否存在，存在则先清除再开启
      if (dataItem.timer) {
        clearInterval(dataItem.timer);
      }
      dataItem.timer = setInterval(() => {
        const s = dataItem.sec--;
        dataItem.button_text = `${s}秒`;
        if (s <= 0) {
          clearInterval(dataItem.timer);
          dataItem.button_text = `重新获取`;
        }
      }, 1000);
    };
    const form = toRefs(formConfig);
    const data = toRefs(dataItem);
    // 提交表单
    const handleFinish = (value) => {
      console.log(value);
    };
    // onMounted(() => {});
    return {
      ...form,
      ...data,
      // ruleForm,
      formConfig,
      handleFinish,
      // checkUsername,
      // checkPassword,
      // checkPasswords,
      getCode,
    };
  },
};
</script>


<style lang="scss">
@import "./style.scss";
</style>